<template>
    <grid-layout
        :layout.sync="layout"
        :col-num="192"
        :row-height="10"
        :is-draggable="true"
        :is-resizable="true"
        :is-mirrored="false"
        :vertical-compact="false"
        :margin="[0, 0]"
        :use-css-transforms="true"
        :prevent-collision="true"
        style="margin: 0 auto;"
        :style="{width: width, height: height}"
      >
        <div class="map" v-if="$slots.map">
            <slot name="map"></slot>
        </div>
        <grid-item
          v-for="item in layout"
          
          :x="item.x"
          :y="item.y"
          :w="item.w"
          :h="item.h"
          :i="item.i"
          :key="item.i"
          :static="static"
          :class="static ? 'staticNone':''"
          @move="moveEvent"
          @resize="resizeEvent"
        >
            <div class="name" v-if="!static">{{item.i}}（x：{{item.x}}，y：{{item.y}}，w：{{item.w*10}}，h：{{item.h*10}}）</div>
            <div class="remove" @click="dele(item.i)" v-if="!static"><a-icon type="close" /></div>
            <slot :name="item.i"></slot>
        </grid-item>
    </grid-layout>
</template>

<script>
import { GridLayout, GridItem } from "vue-grid-layout";

export default {
    components: {
        GridLayout,
        GridItem,
    },
    props: {
        width: {
            type: String,
            default: '1920px'
        },
        height: {
            type: String,
            default: '1080px'
        },
        static: {
            type: Boolean,
            default: true
        },
        layout: {
            type: Array,
            default: []
        }
    },
    data() {
        return {
            layout: []
        }
    },
    methods: {
        add() {
            this.layout.push({
                x: 0,
                y: 10,
                w: 10,
                h: 10,
                i: this.layout.length + 1,
            });
        },
        dele(i) {
            this.layout.splice(
                this.layout.findIndex((item) => item.i === i),
                1
            );
            this.$emit('dele',this.layout)
        },
        moveEvent(i, newX, newY) {
            // console.log("MOVE i=" + i + ", X=" + newX + ", Y=" + newY);
            this.$emit('moveEvent',this.layout)
        },
        resizeEvent(i, newH, newW, newHPx, newWPx) {
            // console.log("RESIZE i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
            this.$emit('resizeEvent',this.layout)
        },
    }
}
</script>

<style lang="less" scoped>
.map{
  width: 100%;
  height: 100%;
  background: #000;
  position: absolute;
  z-index: 1;
}

.vue-grid-layout {
  background: #000;
}
.vue-grid-item:not(.vue-grid-placeholder) {
  background: rgba(204, 204, 204, .1);
  border: 1px solid #fff;
  transition:none;
  z-index: 2;
}
.staticNone{
    background: none !important;
    border: none !important;
}
.vue-grid-item .resizing {
  opacity: 0.9;
}
.vue-grid-item .static {
  background: #ccc;
}
.vue-grid-item .text {
  font-size: 24px;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 100%;
  width: 100%;
}
.vue-grid-item .no-drag {
  height: 100%;
  width: 100%;
}
.vue-grid-item .minMax {
  font-size: 12px;
}
.vue-grid-item .add {
  cursor: pointer;
}
.vue-draggable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>")
    no-repeat #fff;
  background-position: bottom right;
  padding: 0 8px 8px 0;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  cursor: pointer;
}

/deep/.vue-grid-item>.vue-resizable-handle{
    background-color: #fff;
    width: 15px;
    height: 15px;
}

.vue-grid-item .name{
    position: absolute;
    left: 4px;
    top: 0;
    z-index: 9999;
}

.vue-grid-item .remove {
    position: absolute;
    right: 4px;
    top: 0;
    cursor: pointer;
    z-index: 9999;
}
</style>